<template>
    <div v-if="rateStatus">
        <div class="m-modal-cov"></div>
        <div class="api m-modal-box">
            <div class="m-modal-header">
                {{title}}
                <span @click="close"><Icon type="close-round"></Icon></span>
            </div>
            <div class="m-modal-content">
                <div class="m-modal-content-header" v-if="dealerId != 0">
                    <span>车行名称：{{detailData.dealer_title == ''?'匿名':detailData.dealer_title}}</span>
                    <span style="margin-left: 50px">登录账号：{{detailData.member_username}}</span>
                    <i-switch v-model="switchStatus" size="large" style="float: right" @on-change="changeRateStatus">
                        <span slot="open">开启</span>
                        <span slot="close">关闭</span>
                    </i-switch>
                </div>
                <div class="car-header">储蓄卡</div>
                <table>
                    <thead>
                    <tr>
                        <th>配置时间</th>
                        <th>结算时间</th>
                        <th>结算费率</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>常规时间</td>
                        <td>
                            <Select v-model="dataList[0].close_way" size="small" style="width:100px">
                                <Option value="T+0">T+0</Option>
                                <Option value="T+1">T+1</Option>
                            </Select>
                        </td>
                        <td>
                            <Input v-model="dataList[0].close_rate" size="small" style="width: 100px">
                            <span slot="append">‰</span>
                            </Input>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            从<DatePicker   :value="dataList[1].start_time" @on-change="initStartTime1" size="small" type="date" placeholder="选择日期" style="width: 120px"></DatePicker>
                            到<DatePicker :value="dataList[1].end_time" @on-change="initEndTime1" size="small" type="date" placeholder="选择日期" style="width: 120px"></DatePicker>
                        </td>
                        <td>
                            <Select v-model="dataList[1].close_way" size="small" style="width:100px">
                                <Option value="T+0">T+0</Option>
                                <Option value="T+1">T+1</Option>
                            </Select>
                        </td>
                        <td>
                            <Input v-model="dataList[1].close_rate" size="small" style="width: 100px">
                            <span slot="append">‰</span>
                            </Input>
                        </td>
                    </tr>
                    </tbody>
                </table>

                <div class="car-header">信用卡</div>
                <table>
                    <thead>
                    <tr>
                        <th>配置时间</th>
                        <th>结算时间</th>
                        <th>结算费率</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>常规时间</td>
                        <td>
                            <Select v-model="dataList[2].close_way" size="small" style="width:100px">
                                <Option value="T+0">T+0</Option>
                                <Option value="T+1">T+1</Option>
                            </Select>
                        </td>
                        <td>
                            <Input v-model="dataList[2].close_rate" size="small" style="width: 100px">
                            <span slot="append">‰</span>
                            </Input>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            从<DatePicker :value="dataList[3].start_time" @on-change="initStartTime2" size="small" type="date" placeholder="选择日期" style="width: 120px"></DatePicker>
                            到<DatePicker :value="dataList[3].end_time" @on-change="initEndTime2" size="small" type="date" placeholder="选择日期" style="width: 120px"></DatePicker>
                        </td>
                        <td>
                            <Select v-model="dataList[3].close_way" size="small" style="width:100px">
                                <Option value="T+0">T+0</Option>
                                <Option value="T+1">T+1</Option>
                            </Select>
                        </td>
                        <td>
                            <Input v-model="dataList[3].close_rate" size="small" style="width: 100px">
                            <span slot="append">‰</span>
                            </Input>
                        </td>
                    </tr>
                    </tbody>
                </table>


                <div class="car-header">微信</div>
                <table>
                    <thead>
                    <tr>
                        <th>配置时间</th>
                        <th>结算时间</th>
                        <th>结算费率</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>常规时间</td>
                        <td>
                            <Select v-model="dataList[4].close_way" size="small" style="width:100px">
                                <Option value="T+0">T+0</Option>
                                <Option value="T+1">T+1</Option>
                            </Select>
                        </td>
                        <td>
                            <Input v-model="dataList[4].close_rate" size="small" style="width: 100px">
                            <span slot="append">‰</span>
                            </Input>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            从<DatePicker :value="dataList[5].start_time" @on-change="initStartTime3" size="small" type="date" placeholder="选择日期" style="width: 120px"></DatePicker>
                            到<DatePicker :value="dataList[5].end_time" @on-change="initEndTime3" size="small" type="date" placeholder="选择日期" style="width: 120px"></DatePicker>
                        </td>
                        <td>
                            <Select v-model="dataList[5].close_way" size="small" style="width:100px">
                                <Option value="T+0">T+0</Option>
                                <Option value="T+1">T+1</Option>
                            </Select>
                        </td>
                        <td>
                            <Input v-model="dataList[5].close_rate" size="small" style="width: 100px">
                            <span slot="append">‰</span>
                            </Input>
                        </td>
                    </tr>
                    </tbody>
                </table>

                <div class="car-header">支付宝</div>
                <table>
                    <thead>
                    <tr>
                        <th>配置时间</th>
                        <th>结算时间</th>
                        <th>结算费率</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>常规时间</td>
                        <td>
                            <Select v-model="dataList[6].close_way" size="small" style="width:100px">
                                <Option value="T+0">T+0</Option>
                                <Option value="T+1">T+1</Option>
                            </Select>
                        </td>
                        <td>
                            <Input v-model="dataList[6].close_rate" size="small" style="width: 100px">
                            <span slot="append">‰</span>
                            </Input>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            从<DatePicker :value="dataList[7].start_time" @on-change="initStartTime4" size="small" type="date" placeholder="选择日期" style="width: 120px"></DatePicker>
                            到<DatePicker :value="dataList[7].end_time" @on-change="initEndTime4" size="small" type="date" placeholder="选择日期" style="width: 120px"></DatePicker>
                        </td>
                        <td>
                            <Select v-model="dataList[7].close_way" size="small" style="width:100px">
                                <Option value="T+0">T+0</Option>
                                <Option value="T+1">T+1</Option>
                            </Select>
                        </td>
                        <td>
                            <Input v-model="dataList[7].close_rate" size="small" style="width: 100px">
                            <span slot="append">‰</span>
                            </Input>
                        </td>
                    </tr>
                    </tbody>
                </table>

            </div>
            <div class="m-modal-footer">
                <Button type="primary" @click="submitFn" style="width: 80px">提交</Button>
            </div>
        </div>
    </div>
</template>
<script>
    import API from '../../config/api'
    import qs from 'qs'
    export default {
        props: ['rateStatus','dealerRateData','detailData','dealerId','dealerIdList'],
        data() {
            return {
                switchStatus:true
            }
        },
        methods: {
            submitFn(){
                let vm = this;
                switch (this.dealerId){
                    case '':
                        vm.saveRateConfigList();
                        break;
                    default:
                        vm.saveRateConfig();
                }
            },
            changeRateStatus(){
                this.axios.post(API.CHANGE_RATE_STATUS,qs.stringify({dealerId:this.dealerId})).then(response => {
                    //console.log(response)
                    if (response.data.code === 1) {
                        this.$Message.success(response.data.msg);
                    } else {
                        this.$Message.error(response.data.msg);
                    }
                }, response => {
                })
            },
            saveRateConfig() {
                if(this.dealerId > 0){
                    this.dataList.forEach(item=>{
                        item.dealer_id = this.dealerId;
                    })
                }
                console.log(this.dataList)
                this.axios.post(API.SAVE_RATE_DEALER_CONFIG,this.dataList).then(response => {
                    if (response.data.code === 1) {
                        this.close();
                        this.$Message.success(response.data.msg);
                    } else {
                        this.$Message.error(response.data.msg);
                    }
                }, response => {
                })
            },
            saveRateConfigList(){
                this.axios({
                    method:"POST",
                    url:API.SAVE_RATE_CONFIG_LIST,
                    data:this.dataList,
                    params:{dealerIdList:this.dealerIdList}
                }).then(response =>{
                    if (response.data.code === 1) {
                        this.close();
                        this.$Message.success(response.data.msg);
                    } else {
                        this.$Message.error(response.data.msg);
                    }
                },response =>{
                });
            },
            close() {
                this.$emit('closeModal')
            },
            initStartTime1(time){
                this.dataList[1].start_time = time;
            },
            initEndTime1(time){
                this.dataList[1].end_time = time;
            },
            initStartTime2(time){
                this.dataList[3].start_time = time;
            },
            initEndTime2(time){
                this.dataList[3].end_time = time;
            },
            initStartTime3(time){
                this.dataList[5].start_time = time;
            },
            initEndTime3(time){
                this.dataList[5].end_time = time;
            },
            initStartTime4(time){
                this.dataList[7].start_time = time;
            },
            initEndTime4(time){
                this.dataList[7].end_time = time;
            }

        },
        computed: {
            title(){
                switch (this.dealerId){
                    case 0:
                        return '默认收费配置';
                    default:
                        return '修改费率配置'
                }
            },
            dataList () {
                let vm = this;
                let localArray = [];
                if(this.dealerRateData.length ==8){
                    this.dealerRateData.map((item)=>{
                        if(item.card_class==1){
                            item.config_item=='default' ? localArray[0] = item : localArray[1] = item;
                        }else if(item.card_class==0){
                            item.config_item=='default' ? localArray[2] = item : localArray[3] = item;
                        }else if(item.card_class==2){
                            item.config_item=='default' ? localArray[4] = item : localArray[5] = item;
                        }else if(item.card_class==3){
                            item.config_item=='default' ? localArray[6] = item : localArray[7] = item;
                        }
                    })
                    vm.switchStatus = this.dealerRateData.some((item)=>{
                        return item.status == 1;
                    })
                }else if(this.dealerRateData.length ==4){
                    this.dealerRateData.map((item)=>{
                        if(item.card_class==1){
                            item.config_item=='default' ? localArray[0] = item : localArray[1] = item;
                        }else if(item.card_class==0){
                            item.config_item=='default' ? localArray[2] = item : localArray[3] = item;
                        }
                    })
                    vm.switchStatus = this.dealerRateData.some((item)=>{
                        return item.status == 1;
                    })
                }else {
                    localArray = [
                        {
                            dealer_id:vm.dealerId,
                            card_class:1,
                            config_item:'default',
                            close_way:'',
                            close_rate:'',
                            start_time:'',
                            end_time:'',
                            status:1
                        },
                        {
                            dealer_id:vm.dealerId,
                            card_class:1,
                            config_item:'time_range',
                            close_way:'',
                            close_rate:'',
                            start_time:'',
                            end_time:'',
                            status:1
                        },{
                            dealer_id:vm.dealerId,
                            card_class:0,
                            config_item:'default',
                            close_way:'',
                            close_rate:'',
                            start_time:'',
                            end_time:'',
                            status:1
                        },
                        {
                            dealer_id:vm.dealerId,
                            card_class:0,
                            config_item:'time_range',
                            close_way:'',
                            close_rate:'',
                            start_time:'',
                            end_time:'',
                            status:1
                        },{
                            dealer_id:vm.dealerId,
                            card_class:2,
                            config_item:'default',
                            close_way:'',
                            close_rate:'',
                            start_time:'',
                            end_time:'',
                            status:1
                        },
                        {
                            dealer_id:vm.dealerId,
                            card_class:2,
                            config_item:'time_range',
                            close_way:'',
                            close_rate:'',
                            start_time:'',
                            end_time:'',
                            status:1
                        },{
                            dealer_id:vm.dealerId,
                            card_class:3,
                            config_item:'default',
                            close_way:'',
                            close_rate:'',
                            start_time:'',
                            end_time:'',
                            status:1
                        },
                        {
                            dealer_id:vm.dealerId,
                            card_class:3,
                            config_item:'time_range',
                            close_way:'',
                            close_rate:'',
                            start_time:'',
                            end_time:'',
                            status:1
                        }
                    ]
                }
                return localArray
            }
        }
    }
</script>
<style scoped>
    .m-modal-cov {
        position: fixed;
        width: 100%;
        height: 100%;
        background-color: #000;
        z-index: 101;
        top: 0;
        left: 0;
        opacity: .5;
    }
    .m-modal-box {
        position: fixed;
        width: 800px;
        z-index: 102;
        margin-left: 10%;
        background-color: #fff;
        border-radius: 5px;
    }
    .m-modal-content {
        padding: 20px;
    }
    .m-modal-header {
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        border-bottom: 1px solid #d6d6d6;
        padding: 0 10px 0 20px;
    }
    .m-modal-header span {
        float: right;
        padding: 0 10px;
        cursor: pointer;
    }
    .m-modal-footer {
        height: 50px;
        line-height: 50px;
        border-top:1px solid #d6d6d6;
        padding-right: 20px;
        text-align: right;
    }
    .m-modal-content-header {
        height: 40px;
    }
    .api table {
        font-family: Consolas,Menlo,Courier,monospace;
        font-size: 12px;
        border-collapse: collapse;
        border-spacing: 0;
        empty-cells: show;
        border: 1px solid #e9e9e9;
        width: 100%;
        margin-bottom: 24px;
    }
    .api table td, .api table th {
        border: 1px solid #e9e9e9;
        padding: 8px 16px;
        text-align: left;
    }
    .api table th {
        background: #f7f7f7;
        white-space: nowrap;
        color: #5c6b77;
        font-weight: 600;
    }
    .car-header {
        background-color: #f7f7f7;
        padding-left: 15px;
        border: 1px solid #e9eaec;
        border-radius: 2px;
        height: 30px;
        line-height: 30px;
    }
</style>
